<template>
  <div class="s_box">
    <div class="s_move">
      <div class="s_head" :style="{width: data.items.length * 25 + '%'}" :class="{nob: border}">
          <div class="h_item" v-for="(e, i) in data.items" @click="toggle(i)" :class="{active: active == i}" :key="e.url">
              <router-link :to="e.url" tag="div">{{e.name}}</router-link>
          </div>
          <div class="line" :style="{width:  width + 10 + 'px', left: left - 5 + 'px'}"></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      children: null,
      active: 0,
      width: 0,
      left: 0
    };
  },
  props: ["data", "border"],
  activated() {
    this.sync()
  },
  mounted: function() {
    this.children = this.$el.children[0].children[0].children;
    this.width = this.children[this.active].offsetWidth;
    this.left = this.children[this.active].offsetLeft;
    window.addEventListener('popstate', function(e){
      this.sync()
    }.bind(this))
  },
  methods: {
    toggle(a) {
      this.active = a;
      this.width = this.children[this.active].offsetWidth;
      this.left = this.children[this.active].offsetLeft;
    },
    sync() {
      var _this = this
      this.data.items.forEach((e, i) => {
        if(e.url == _this.$route.path){
          _this.toggle(i)
        }
      })
    }
  }
};
</script>
<style scoped>
.s_box {
  position: relative;
  width: 100%;
  padding: 0.2rem 0rem 0;
}
.s_box::after {
    content: '';
    position: absolute;
    right: 0rem;
    top: 0rem;
    display: inline-block;
    width: 0.6rem;
    height: 1rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0),rgba(255, 255, 255, 1));
    /* z-index: 1; */
}
.s_move{
  position: relative;
  overflow: scroll;
}
.s_head {
  position: relative;
  height: 0.81rem;
  padding-bottom: 0.1rem;
  font-size: 0.3rem;
  line-height: 0.81rem;
  display: flex;
  justify-content: space-around;
  color: #666;
  border-bottom: 0.01rem solid #e2e2e2;
}
.nob{
  border: unset;
}
.h_item {
  display: inline-block;
  text-align: center;
}
.active {
  color: #ed5172;
}
.line {
  position: absolute;
  bottom: 0rem;
  border-bottom: 0.04rem solid #ed5172;
  transition: all 0.3s;
}
.s_content {
  position: relative;
  overflow: hidden;
  height: 3rem;
}
.c_item {
  position: absolute;
  top: 0;
  width: 100%;
  background-color: #f8f8f8;
}
.animate {
  transition: all 0.3s;
}
</style>
